<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../../public/css/bootstrap.min.css">
    <link rel="stylesheet" href="./SearchUserAndGroup.css">
    <link rel="stylesheet" href="../../public/css/global_style.css">
</head>
<body>

<div class="global-div-row">
    <div class="global-div-column col-1 global-menu-color">
        <div class="global-div-icon">
            <button class="global-btn-icon" id="user-btn">
            <?xml version="1.0" standalone="no"?>
            <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
                <circle cx="8" cy="8" r="8" fill="rgb(0, 153, 255)"></circle>
            </svg>
            </button>
        </div>
        <div class="global-div-icon">
            <button class="global-btn-icon" id="chat-btn">
                <?xml version="1.0" standalone="no"?>
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
                    <g fill="none" stroke="#1a1a1a" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
                        <path fill="#1a1a1a"
                              d="M17 12.5a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m-5 0a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1m-5 0a.5.5 0 1 0 0-1a.5.5 0 0 0 0 1"></path>
                        <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12c0 1.821.487 3.53 1.338 5L2.5 21.5l4.5-.838A9.96 9.96 0 0 0 12 22"></path>
                    </g>
                </svg>
            </button>
        </div>
        <div class="global-div-icon">
            <button class="global-btn-icon" id="friend-group-btn">
                <?xml version="1.0" standalone="no"?>
                <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
                    <g fill="none" stroke="#1a1a1a" stroke-linecap="round" stroke-width="1.5">
                        <path d="M7 18v-1a5 5 0 0 1 5-5v0a5 5 0 0 1 5 5v1"></path>
                        <path stroke-linejoin="round" d="M12 12a3 3 0 1 0 0-6a3 3 0 0 0 0 6"></path>
                        <path stroke-linejoin="round"
                              d="M21 3.6v16.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6V3.6a.6.6 0 0 1 .6-.6h16.8a.6.6 0 0 1 .6.6"></path>
                    </g>
                </svg>
            </button>
        </div>
        <div class="global-div-icon">
            <button class="global-btn-icon" id="search-btn">
                <?xml version="1.0" standalone="no"?>
                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
                    <path fill="rgb(96,96,96)"
                          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0"></path>
                </svg>
            </button>
        </div>
        <div class="global-div-icon">
            <button class="global-btn-icon" id="new-group-btn">
                <?xml version="1.0" standalone="no"?>
                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path fill="#1a1a1a" d="M15 14s1 0 1-1s-1-4-5-4s-5 3-5 4s1 1 1 1zm-7.978-1L7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276c.593.69.758 1.457.76 1.72l-.008.002l-.014.002zM11 7a2 2 0 1 0 0-4a2 2 0 0 0 0 4m3-2a3 3 0 1 1-6 0a3 3 0 0 1 6 0M6.936 9.28a6 6 0 0 0-1.23-.247A7 7 0 0 0 5 9c-4 0-5 3-5 4q0 1 1 1h4.216A2.24 2.24 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904c.243-.294.526-.569.846-.816M4.92 10A5.5 5.5 0 0 0 4 13H1c0-.26.164-1.03.76-1.724c.545-.636 1.492-1.256 3.16-1.275ZM1.5 5.5a3 3 0 1 1 6 0a3 3 0 0 1-6 0m3-2a2 2 0 1 0 0 4a2 2 0 0 0 0-4"></path></svg>
            </button>
        </div>
        <div class="global-div-icon">
            <button class="global-btn-icon" id="info-btn">
                <?xml version="1.0" standalone="no"?>
                <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="48" height="48"><g fill="#1a1a1a"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"></path><path d="M7.002 11a1 1 0 1 1 2 0a1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"></path></g></svg>
            </button>
        </div>
    </div>
    <div class="global-div-column col-11">
        <div class="search-container">
            <div class="search-title">查找用户或群组</div>
            <hr class="search-hr">
            <div class="search-box">
                <div class="input-group mb-2">
                    <div class="form-floating">
                        <input type="text" class="form-control" id="search-input-id" placeholder="Username">
                        <label for="search-input-id">请输入ID</label>
                    </div>
                    <button class="input-group-text" id="search-enter">
                        <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
                            <path fill="#1a1a1a" fill-rule="evenodd"
                                  d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8"></path>
                        </svg>
                    </button>
                </div>
            </div>
            <div id="search-result-none" class="search-result-none">什么都没有找到.....</div>
            <div id="search-result" class="search-result">
                <div class="search-result-item">
                    <?xml version="1.0" standalone="no"?>
                    <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" width="72" height="72">
                        <circle cx="8" cy="8" r="8" fill="rgb(0,0,139)"></circle>
                    </svg>
                </div>
                <div class="search-result-item">
                    <span id="search-result-type-label">用户名:</span> 
                    <span id="search-result-username">test</span>
                </div>
                <div class="search-result-item">ID: <span id="search-result-id">1234567890</span></div>
                <div class="search-result-item">
                    <button type="button" class="btn btn-outline-primary" id="search-result-add-friend-btn">添加好友</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../../public/js/bootstrap.bundle.min.js"></script>
<script src="./SearchUserAndGroup.js"></script>
<script src="../../global/Config.js"></script>
<script src="../../public/js/nevigate.js"></script>
</body>
</html>